<template>
    <router-link :to="{name: 'order', query: {id: order.id}}" class="order-item">
      <div class="order-user">
        <div class="order-img">
          <img :src="order.userAvatar" :alt="order.userNick" class="order-item__avatar"/>
          <span class="star-icon star-icon-1" v-if="order.userStarLevel > 0"></span>
          <span class="star-icon star-icon-2" v-if="order.userStarLevel > 1"></span>
          <span class="star-icon star-icon-3" v-if="order.userStarLevel > 2"></span>
        </div>
      </div>
      <div class="order-detail">
        <div class="order-username">{{order.userNick}}</div>
        <div class="order-sale">成交金额: <span v-big-number="order.sale"></span></div>
        <div class="order-date">{{order.date | timeAgo}}</div>
      </div>
      <div class="order-income">+<span v-big-number="order.income"></span></div>
    </router-link>
</template>

<script>
export default {
  name: 'OrderCard',
  props: {
    order: {
      type: Object,
      default: () => ({
        sale: 0.00, // 销售额
        income: 0.00, // 收益
        userNick: '', // 用户昵称
        userAvatar: '', // 头像
        userStarLevel: 0, // 用户星级
        date: Date.now() // 成交时间
      })
    }
  }
}
</script>

<style scoped lang="stylus">
  .order-item
    display flex
    text-decoration none
    &__avatar
      width 100%
      border-radius 50%
      display block
  .order-user
    flex-grow 0
    display flex
    align-items center
    padding-left 30px
    padding-right 30px
  .order-img
    width 90px
    height 90px
    border-radius 50%
    background #ddd
    position relative
  .order-detail
    flex 1
    padding-top 20px
    padding-bottom 20px
    border-bottom 1px solid #ddd
  .order-username
    color #333
    font-size 30px
  .order-sale
    color #333
    font-size 22px
  .order-date
    color #999
    font-size 18px
  .order-income
    color #e79040
    font-size 36px
    padding-right 30px
    border-bottom 1px solid #ddd
    display flex
    align-items center
  .star-icon
    width 24px
    height 24px
    display block
    background url("../assets/star.png") no-repeat
    background-size cover
    position absolute
    top 100%
    left: 50%;
  .star-icon-1
    transform translate(-50%, -50%)
  .star-icon-2
    transform translate(-150%, -80%)
  .star-icon-3
    transform translate(50%, -80%)
</style>
